<template>
<div class="content">
    <h3> 新书众筹</h3>
    <span>以最低的价格获取我的新书 </span>

    <!-- 众筹的总体状态  -->
    <div class="status">
        <div v-if="!closed">已众筹资金：<b>{{ total }} ETH </b></div>
        <div v-if="closed"> 众筹已完成 </div>
        <div>众筹截止时间：{{ endDate }}</div>
    </div>

    <!-- 当读者参与过，显示如下div  -->
    <div v-if="joined" class="card-bkg">
        <div class="award-des">
            <span> 参与价格 </span>
            <b> {{ joinPrice }} ETH </b>
        </div>

        <button :disabled="closed" @click="withdraw">赎回</button>
    </div>

    <!-- 当读者未参与，显示如下div  -->
    <div v-if="!joined" class="card-bkg">
        <div class="award-des">
            <span> 当前众筹价格 </span>
            <b> {{ price }} ETH </b>
        </div>

        <button :disabled="closed" @click="join">参与众筹</button>
    </div>

    <!--  如果是创作者，显示 -->
    <div v-if="isAuthor">
        <button :disabled="closed" @click="withdrawFund"> 提取资金</button>
    </div>

</div>
</template>

<script>
import Web3 from 'web3'
import contract from 'truffle-contract'
import crowd from '../../../build/contracts/Crowdfunding.json'
export default {
    name: 'CrowdFund',
    data () {
        return {
            web3: null,
            price: null,
            total: 0,
            closed: true,
            joinPrice: null,
            joined: false,
            endDate: null,
            isAuthor: true
        }
    },
    async mounted () {
        await this.initWeb3Account()
        await this.initContract()
        await this.getCrowdInfo()
    },
    methods: {
        async initWeb3Account () {
            if (window.ethereum) {
                this.provider = window.ethereum
                try {
                    await window.ethereum.enable()
                } catch (error) {
                    console.log('User denied account access')
                }
            } else if (window.web3) {
                this.provider = window.web3.currentProvider
            } else {
                this.provider = new Web3.providers.HttpProvider('http://127.0.0.1:8545')
                console.warn('provider', this.provider)
            }
            this.web3 = new Web3(this.provider)
            this.web3.eth.getAccounts().then(accs => {
                this.account = accs[0]
                console.warn('account', accs)
            })
        },
        async initContract () {
            const crowdContract = contract(crowd)
            crowdContract.setProvider(this.provider)
            this.crowdFund = await crowdContract.deployed()
            console.warn('crowdContract----crowdFund', crowdContract, this.crowdFund)
        },
        async getCrowdInfo () {
            // 获取合约的余额
            this.web3.eth.getBalance(this.crowdFund.address).then(
                r => {
                    this.total = this.web3.utils.fromWei(r)
                }
            )

            // 获取读者的参与金额
            this.crowdFund.joined(this.account).then(
                r => {
                    if (r > 0) {
                        this.joined = true
                        this.joinPrice = this.web3.utils.fromWei(r)
                    }
                }
            )

            // 获取合约的关闭状态
            this.crowdFund.closed().then(
                r => {
                    this.closed = r
                }
            )

            // 获取当前的众筹价格
            this.crowdFund.price().then(
                r => {
                    this.price = this.web3.utils.fromWei(r)
                }
            )

            // 获取众筹截止时间
            this.crowdFund.endTime().then(r => {
                var endTime = new Date(r * 1000)
                // 把时间戳转化为本地时间
                this.endDate = endTime.toLocaleDateString().replace(/\//g, '-') + ' ' + endTime.toTimeString().substr(0, 8)
            })

            // 获取众筹创作者地址
            this.crowdFund.author().then(r => {
                console.warn('获取众筹创作者地址', r)
                this.isAuthor = this.account === r
            })
        },
        join () {
            this.web3.eth.sendTransaction({
                from: this.account,
                to: this.crowdFund.address,
                value: this.web3.utils.toWei(this.price)
            }).then(() =>
                this.getCrowdInfo()
            )
        },
        withdraw () {
            this.crowdFund.withdraw({
                from: this.account
            }).then(() => {
                this.getCrowdInfo()
            })
        },
        withdrawFund () {
            this.crowdFund.withdrawFund({
                from: this.account
            }).then(() => {
                this.getCrowdInfo()
            })
        }
    }
}
</script>
